import {theme} from "../../common/theme.js";

export const css = `
.right-body {
  height: 100%;
  width: calc(100% - ${theme.leftMenuWidth}); /* 动态计算宽度，减去LeftMenu宽度 */
  position: fixed;
  right: 0;
  left: ${theme.leftMenuWidth}; /* 与LeftMenu宽度对应 */
  top: 0;
  overflow-y: auto;
  overflow-x: hidden;
  transition: left 0.3s ease, width 0.3s ease;
  background-color: ${theme.bgc};
  z-index: 1;
}

/* 平板设备 */
@media (max-width: 1024px) {
  .right-body {
    width: calc(100% - 240px);
    left: 240px;
  }
}

/* 移动设备 - 横屏 */
@media (max-width: 768px) {
  .right-body {
    width: 100%;
    left: 0;
    padding: 0 10px;
  }
}

/* 移动设备 - 竖屏 */
@media (max-width: 480px) {
  .right-body {
    width: 100%;
    left: 0;
    padding: 0 8px;
    top: ${theme.topHeight}; /* 为NavBar留出空间 */
    height: calc(100% - ${theme.topHeight});
  }
}

/* 超小屏幕 */
@media (max-width: 320px) {
  .right-body {
    padding: 0 5px;
    top: ${theme.topHeight};
    height: calc(100% - ${theme.topHeight});
  }
}
`;